<template>
    <div id="fixed">
        <ul>
            <li id="top" style="background-color: transparent; border-top: 1px solid transparent;">
                <!-- 以下前五个a连接地址需要更改 -->
                <!-- <a href=""> -->
                    <!-- <img src="/fixtop.png" alt=""> -->
                    <!-- <span>立即参与</span> -->
                <!-- </a> -->
            </li>
            <li id="call">
                <a href="">
                    <i class="el-icon-headset"></i>
                    <span>联系客服</span>
                </a>
            </li>
            <li id="serp">
                <a href="">
                    <!-- 图片换为二维码 -->
                    <!-- <img src="/head1.webp" alt=""> -->
                    <i class="el-icon-film"></i>
                    <span>客服企微</span>
                </a>
            </li>
            <li id="opt">
                <a href="">
                    <i class="el-icon-s-promotion"></i>
                    <span>意见反馈</span>
                </a>
            </li>
            <li id="appd">
                <a href="">
                    <!-- 图片换为二维码 -->
                    <!-- <img src="/head1.webp" alt=""> -->
                    <i class="el-icon-mobile-phone"></i>
                    <span>APP下载</span>
                </a>
            </li>
            <li id="totop" v-show="scrolltop>400">
                <a href="#">
                <i class="el-icon-arrow-up"></i>
                
                </a>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                scrolltop: 0,
            }
        },
        mounted(){        
            window.onscroll =()=> {
            this.scrolltop=document.documentElement.scrollTop
            }
        },
    }
</script>
<style>
    html{
        scroll-behavior: smooth;
    }
</style>
<style lang="scss" scoped>
*{
    padding: 0;
    margin: 0;
    list-style: none;
}
#fixed{
    // right: 6%;
    right: 1%;
    position: fixed;
    // top: 34%;
    top: 55%;
    width: 80px;
    z-index: 100;
    color: #333;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 1px;
    >ul{
        width: 60px;
        >li{
            background-color: #fff;
            border-top: 1px solid #f5f5f5;
            // background-color: #0003;
            height: 60px;
            position: relative;
            >a{
                line-height: 60px;
                text-align: center;
                >i{
                    width: 40px;
                    height: 40px;
                    position: absolute;
                    top: 0px;
                    left: 10px;
                    line-height: 60px;
                    text-align: center;
                    // margin:0 10px 10px;
                    font-size: 40px;
                    transition:0.2s;
                }
                >img{
                    width: 100%;
                }
                >span{
                    display: block;
                    transform: scale(0);
                    transition:0.2s;
                }
            }
        }
        >li#top{
            >a{
                >span{
                    background-color: #ff6e6e;
                    color: #fff;
                    position: absolute;
                    top:-15px;
                    right: -30px;
                    font-size: 14px;
                    height: 20px;
                    line-height: 20px;
                    border-radius: 10px 10px 10px 0;
                    padding: 0 5px;
                    animation: jump 1s linear infinite;
                }
            }
        }
        >li#serp,li#appd{
            >a{
                >img{
                    width: 100px;
                    height: 100px;
                    position: absolute;
                    left: -121px;
                    top: -1px;
                    display: none;
                }
            }
        }
        >li#serp:hover,li#appd:hover{
            >a{
                >img{
                    display: block;
                }
            }
        }
        >li:nth-child(2):hover,li:nth-child(3):hover,li:nth-child(4):hover,li:nth-child(5):hover{
            >a{
                >span{
                    transform: scale(1);
                }
                >i{
                    transform: scale(0);
                }
            }
        }
        >li#totop{
            margin-top: 20px;
            &:hover{
                >a{
                    i{
                    color: #ff6e6e;
                    }
                }
            }
        }
        >li:hover{
            >a{
                >span{
                    color: #ff6e6e;
                }
            }
        }
    }
}
@keyframes jump {
    0%{
        transform: translateY(0px);
    }
    50%{
        transform: translateY(-6px);
    }
    100%{
        transform: translateY(0px);
    }
}
</style>